<template>
  <div id="menuDetail">
    <h1>下单详情</h1>
    <el-row :gutter="20">
      <el-col :span="12" align="center">订餐类型: {{orderTypFilter(thisBill.order_type)}}</el-col>
      <el-col :span="12" align="center">用餐桌号: {{thisBill.seatNumber}}</el-col>
      <el-col :span="12" align="center">用餐人数: {{thisBill.mealsNumber}}</el-col>
      <el-col :span="12" align="center">操作员: {{thisBill.create_by}}</el-col>
      <el-col :span="12" align="center">菜品数量: {{getDishesNumber}}</el-col>
      <el-col :span="12" align="center">总价: {{thisBill.total_price}}</el-col>
      <el-col :span="12" align="center" v-if="!!thisBill.orderId">订单号: {{thisBill.orderId}}</el-col>
      <el-col :span="12" align="center" v-if="!!thisBill.orderId">下单时间: {{thisBill.createTime}}</el-col>
    </el-row>
    

    <div id="dishTable" v-if="!showCheck">
      <el-table
        :data="thisBill.dishes"
        border
        style="width: 100%">
        <el-table-column
          prop="name"
          label="菜名">
        </el-table-column>
        <el-table-column
          prop="number"
          label="数量">
        </el-table-column>
        <el-table-column
          prop="price"
          label="小计">
        </el-table-column>
      </el-table>
      <el-row :gutter="20" style="margin: 10px 0">
        <el-col :span="12" align="center">
          <el-button type="primary" @click="back">继续点菜</el-button>
        </el-col>
        <el-col :span="12" align="center">
<!--          <el-button type="primary" @click="check">去结账</el-button>-->
          <el-button type="primary" @click="gotoOrder">下单</el-button>
        </el-col>
      </el-row>
    </div>
    
    <div id="showCheck" v-else>
      <el-tabs v-model="activeName" @tab-click="handleClick"  >
        <el-tab-pane label="普通支付" name="common" style="display: flex;justify-content: center">
          <commoneCheck :checkInfo="thisBill"></commoneCheck>
        </el-tab-pane>
        <el-tab-pane label="会员支付" name="vip">
          <VIPCheck @changetoCommon="activeName = 'common'" :checkInfo="thisBill"></VIPCheck>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import commoneCheck from '../../components/front/cf/CommonCheck'
  import VIPCheck from '../../components/front/cf/VIPCheck'
  import {mapActions,mapState} from 'vuex'
  export default {
    name: "MenuDetail",
    components: {
      commoneCheck,
      VIPCheck
    },
    data(){
     return {
       activeName: 'common',
       showCheck: false,
       thisBill: {
         total_price: null,
         create_by: '',
         billState: 0,
         seatNumber: 0,
         order_type: 0,
         mealsNumber: 1,
         dishes:[],
         createTime:'',
         orderId: null,
       }
     }
    },
    computed :{
      ...mapState('bills/',{
        bills: state => state.bills,
      }),
      getDishesNumber(){
        let totalDishesNumber = 0
        this.thisBill.dishes.forEach(item => {
          totalDishesNumber+=item.number
        })
        return totalDishesNumber
      }
    },
    created() {
      let query = this.$router.currentRoute.query.bill
      
      if (typeof query==='object'){
        let aBill = query
        console.log(aBill)
        this.thisBill = {
          total_price: aBill.total_price,
          create_by: aBill.create_by,
          billState: aBill.billState,
          seatNumber: aBill.seatNumber,
          order_type: aBill.order_type,
          mealsNumber:  aBill.mealsNumber,
          dishes:aBill.dishes
        }
      } else if (typeof query==='string') {
        this.thisBill.seatNumber = parseInt(sessionStorage.getItem('lastOperateSeat'))
        // 根据桌号得到订单信息
        this.thisBill = (this.bills.filter(item => item.seatNumber === this.thisBill.seatNumber))[0]
      }
      
    },
    methods: {
      ...mapActions('bills/',['createOrder']),
      gotoOrder(){//下单
        console.log('下单:',this.thisBill)
        this.createOrder(this.thisBill).then(res => {
          console.log(res)
          this.thisBill.orderId = res.orderId
          this.thisBill.createTime = res.createTime
          // 下单成功,转向结账页面
          if (!!res){
            this.check()
          }
        })
      },
      orderTypFilter(num){
        if (num===0)  return '餐厅用餐'
        if (num===1) return '电话外卖'
      },
      back(seatnum){
        this.$router.push({path: '/takingOrder/'+this.thisBill.seatNumber, query:{mealsPeople: this.thisBill.mealsNumber}})
      },
      check() {
        this.showCheck = true
      },
      handleClick() {
        console.log('handleClick()')
      }
    }
  }
</script>

<style scoped>

</style>